/**
 * @description 筛选数据组件和下载组件（根据不同机构 业务来源等条件筛选数据）
 * @author 韩
 */
import { Space, Button, Modal, Form, Radio, Input, Select } from "antd";
import React, { useImperativeHandle, useState, useEffect } from "react";

import styles from "./selectunitData.module.scss";
import { QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons';
import ZtreeSelect from "../zc-treeSelect/authTreeSelect";
import { getUrlParam } from "@/utils/getUrlData";
const SelectUnitComponent = ({ children = null, title, condition, sourceData = [], cancel = () => { }, setCondition, treeData = [] }) => {

    const [form] = Form.useForm();     // 表单
    // 表单完成事件
    const onFinish = (values) => {
        console.log('切换机构查询条件：\n', values);
        const { dateType, statDate, comOptions } = values;
        setCondition({
            ...condition,
            dateType, statDate, comCode: comOptions.value, comSName: comOptions.label
        });
        cancel()
    };


    // 清空重置条件
    const clearCondition = () => {
        form.resetFields()//重置
    }

    // 确认提交
    const sumbit = () => {
        form.submit()
    }




    // 年月筛选框相关start
    const [timeInputPlaceHolder, setTimeInputPlaceHolder] = useState("输入格式：如2022年，则直接输入2022")
    const [timeVal, setTimeVal] = useState("tYear")

    const changeTime = (e) => {
        console.log("年或是月？", e.target.value)
        setTimeVal(e.target.value)
        if (e.target.value === "tYear") {
            setTimeInputPlaceHolder("输入格式：如2022年，则直接输入2022")
        } else {
            setTimeInputPlaceHolder("输入格式：如2022年2月，则直接输入202202")
        }
    }



    return (
        <>
            <div className={styles.container}>
                <div className={styles.header}>
                    <Space>
                        <span className={styles.header_title}>{title}</span>
                        <QuestionCircleOutlined />
                    </Space>
                </div>
                <div className={styles.center}>
                    {
                        children ? children : <Form
                            form={form}
                            initialValues={{
                                // comOptions: {
                                //     label: decodeURI(getUrlParam("comSName")),
                                //     value: getUrlParam("secComCode") || null,
                                // },
                                dateType: "tYear",
                                statDate: (new Date()).getFullYear()
                            }}
                            name="createFormData_item"
                            onFinish={onFinish}
                            autoComplete="off"
                        >
                            <Form.Item
                                name="comOptions"
                                rules={[
                                    {
                                        required: true,
                                        message: '必选项',
                                    },
                                ]}
                                label="机构筛选"
                                allowClear={false}
                            >
                                <ZtreeSelect
                                    fieldNames={{
                                        label: "comSName",
                                        value: "comCode",
                                        children: "untList"
                                    }}
                                    treeData={treeData}
                                    onSelect={(value, options) => {
                                        form.setFieldsValue({ state: value });
                                        console.log("options选择了", value, options)
                                    }}
                                />
                            </Form.Item>
                            <Form.Item
                                name="sourceCode"
                                label="来源渠道"
                                allowClear={false}
                            >
                                <Select
                                    disabled={true}
                                    placeholder="来源渠道筛选暂不可用"
                                    labelInValue={true}
                                    showArrow={true}
                                    showSearch={true}
                                    filterOption={(input, option) => (option?.comSName ?? '').includes(input)}
                                    filterSort={(optionA, optionB) =>
                                        (optionA?.comSName ?? '').toLowerCase().localeCompare((optionB?.comSName ?? '').toLowerCase())}
                                    options={sourceData}
                                />
                            </Form.Item>
                            <Form.Item
                                label="时间类型"
                                name={"dateType"}
                            >
                                <Radio.Group
                                    onChange={changeTime}
                                    value={timeVal}>
                                    <Radio value="tYear">年</Radio>
                                    <Radio value="tMonth">月</Radio>
                                </Radio.Group>
                            </Form.Item>
                            {
                                timeVal === "tYear" ? <Form.Item
                                    label="统计年份"
                                    name="statDate"
                                    rules={[
                                        {
                                            required: true,
                                            pattern: /^\d{4}$/,
                                            message: '时间校验未通过，年份格式为：YYYY，如2022年，请输入：2022',
                                        },
                                    ]}
                                >

                                    <Input
                                        placeholder={timeInputPlaceHolder}
                                    // style={{ width: 400 }}
                                    >
                                    </Input>
                                </Form.Item> :
                                    <Form.Item
                                        label="统计月份"
                                        name="statDate"
                                        rules={[
                                            {
                                                required: true,
                                                pattern: /^\d{6}$/,
                                                message: '时间校验未通过，月份格式为：YYYYMM，如2022年8月，请输入：202208',
                                            },
                                        ]}
                                    >

                                        <Input
                                            placeholder={timeInputPlaceHolder}
                                        // style={{ width: 400 }}
                                        >
                                        </Input>
                                    </Form.Item>
                            }

                            {/* <Form.Item
                                label="时间类型"
                                name={"dateType"}
                            >
                                <Radio.Group
                                    onChange={changeTime}
                                    defaultValue={"tYear"}
                                    value={timeVal}>
                                    <Radio value={"tYear"}>年</Radio>
                                    <Radio value={"tMonth"}>月</Radio>
                                </Radio.Group>
                            </Form.Item>

                            <Form.Item
                                label={timeVal === "tYear" ? "统计年份" : "统计月份"}
                                name="date"
                                rules={[
                                    {
                                        required: true,
                                        pattern: timeVal === "tYear" ? /^\d{4}$/ : /^\d{6}$/,
                                        //  /^\d{4}|\d{6}$/,
                                        message: timeVal === "tYear" ? '时间校验未通过，年份格式为：YYYY，如2022年，请输入：2022' : '时间校验未通过，月份格式为：YYYYMM，如2022年8月，请输入：202208',
                                    },
                                ]}
                            >
                                <Input
                                    placeholder={timeInputPlaceHolder}>
                                </Input>
                            </Form.Item> */}
                        </Form>
                    }
                </div>
                <div className={styles.footer}>
                    <Space>
                        <Button onClick={clearCondition}>重置</Button>
                        <Button icon={<SearchOutlined />} type="primary" onClick={sumbit}>
                            确定
                        </Button>
                    </Space>
                </div>
            </div>
        </>
    )
}

export default SelectUnitComponent